{%- import 'apostrophe-ui:components/buttons.html' as buttons -%}
{% for item in data.choices %}
  {% set choice = item.item or item %}
  {% set relationship = item.relationship %}
  <div class="apos-chooser-choice apos-chooser-choice--stacked" data-chooser-choice='{{ choice._id }}'>
    <div class="apos-button apos-button--in-context apos-button--group apos-button--small apos-chooser-controls">
      {{ buttons.inGroup('', { icon: 'arrows', tooltip: 'Sort', action: 'sort-item', value: choice._id}) }}
      {{ buttons.inGroup('', { icon: 'arrow-up', tooltip: 'Move Up', action: 'raise-item', value: choice._id}) }}
      {{ buttons.inGroup('', { icon: 'arrow-down', tooltip: 'Move Down', action: 'lower-item', value: choice._id }) }}
      {%- if data.relationship -%}
        {%- if apos.images.isCroppable(choice) -%}
          {{ buttons.inGroup('', { icon: 'crop', tooltip: 'Crop', action: 'relate-item' , value: choice._id }) }}
        {%- endif -%}
        {%- if data.hints.focalPoint -%}
          {{ buttons.inGroup('', { icon: 'eye', tooltip: 'Edit Focal Point', action: 'focal-point-item' , value: choice._id }) }}
        {%- endif -%}
      {%- endif -%}
      {%- if item._edit or item.item._edit -%}
        {{ buttons.inGroup('', { icon: 'pencil', tooltip: 'Edit', action: 'edit-item', value: choice._id}) }}
      {%- endif -%}
      {{ buttons.inGroup('', { icon: 'trash', tooltip: 'Remove', action: 'delete-item', value: choice._id }) }}
    </div>
    <div class="apos-choose-choice-content">
      {% include data.choiceTemplate %}
    </div>
  </div>
{% endfor %}
